<template>
	<div id="financeDeatil">
		
		<div class="navs_header_box">
			<div class="navs_header_cell cell">
				<div class="dis_f_aro wa form_box">
					<el-form :model="queryParams" ref="queryForm" :inline="true">

						<el-form-item label="" prop="shopId" >
							<div class="dis_f wa">
								<div class="form_item_label">门店</div>
								<el-select v-model="queryParams.shopId" disabled filterable placeholder="请选择">
									<el-option
										v-for="item in shopList"
										:key="item.id"
										:label="item.shopName"
										:value="item.id">
									</el-option>
								</el-select>
							</div>
						</el-form-item>
						<el-form-item label="" style="position: relative;">
							<div class="dis_f wa">
								<div class="form_item_label">车辆</div>
								<el-select
									disabled
									v-model="queryParams.carNumber == null ? '' : queryParams.carNumber + '=>' + queryParams.brand"
									filterable
									placeholder="请选择车辆"
									@change="selectCar"
									allow-create
									ref="agentSelect"
									@hook:mounted="cancalReadOnly"
									@visible-change="cancalReadOnly">
									<el-option
										v-for="item in carList"
										:key="item.id"
										:label="item.carNumber + '=>' + item.brand"
										:value="item.id">
									</el-option>
								</el-select>
							</div>
						</el-form-item>
						<transition name="el-zoom-in-top">
						<div v-show="isMoreSearch">

							<el-form-item label="" prop="costTypeId">
								<div class="dis_f wa">
									<div class="form_item_label">费用类别</div>
									<el-select filterable placeholder="请选择"  v-model="queryParams.costTypeId">
										<el-option
											v-for="item in costTypeList"
											:key="item.id"
											:label="item.costType"
											:value="item.id">
										</el-option>
									</el-select>
								</div>
							</el-form-item>

							<el-form-item label="" prop="financeStatus">
								<div class="dis_f wa">
									<div class="form_item_label">财务状态</div>
									<el-select v-model="queryParams.financeStatus" placeholder="请选择" clearable>
										<el-option
											v-for="dict in dict.type.finance_status"
											:key="dict.value"
											:label="dict.label"
											:value="dict.value"
										/>
									</el-select>
								</div>
							</el-form-item>
							<el-form-item label="" prop="payChannel">
								<div class="dis_f wa">
									<div class="form_item_label">付款方式</div>
									<el-select v-model="queryParams.payChannel" placeholder="请选择" clearable>
										<el-option
											v-for="dict in dict.type.pay_way"
											:key="dict.value"
											:label="dict.label"
											:value="dict.value"
										/>
									</el-select>
								</div>
							</el-form-item>
							<el-form-item label="" prop="payIntoAmount">
								<div class="dis_f wa">
									<div class="form_item_label">是否已入公账</div>
									<el-select v-model="queryParams.payIntoAmount" placeholder="请选择" clearable>
										<el-option
											v-for="dict in dict.type.pay_into_amount"
											:key="dict.value"
											:label="dict.label"
											:value="dict.value"
										/>
									</el-select>
								</div>
							</el-form-item>
							<el-form-item label="" prop="dateTime">
								<div class="dis_f wa">
									<div class="form_item_label">日期</div>
									<el-date-picker
										v-model="dateTime"
										type="daterange"
										@change="changeTime"
										class="date-item"
										style="width: 4.4rem;"
										value-format="yyyy-MM-dd"
										range-separator="-"
										start-placeholder="开始日期"
										end-placeholder="结束日期"/>
								</div>
							</el-form-item>
							<el-form-item label="" prop="financeType" label-width="200">
								<div class="dis_f wa">
									<div class="form_item_label">财务类别</div>
									<el-select v-model="queryParams.financeType" placeholder="请选择财务类别" clearable size="small">
										<el-option
											v-for="dict in dict.type.finance_type"
											:key="dict.value"
											:label="dict.label"
											:value="dict.value"
										/>
									</el-select>
								</div>
							</el-form-item>
						</div>
						</transition>
						<div class="col_c tac" @click="showSearch" style="margin-top: .3rem;">
							更多查询条件
							<i class="el-icon-d-arrow-right" :class=" isMoreSearch ? 'r-90' : 'r90'"></i>
						</div>

					</el-form>

					<div class="btn_box">
						<div class="wa">
							<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
						</div>
						<div class="wa">
							<el-button class="col_0" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="scroll_main o_h" :class="unTotal ? '' : 'hidePullup'">
			<scroll class="main"
				ref="scroll"
				:data="list"
				:top="0"
				:bottom="40"
				@onScroll="onScroll"
				@pullingUp="unTotal && onScrollBottom()"
				@pullingDown="onPullingDown"
				style="position: relative;"
			>
				<div class="cell dis_f pos_rel" v-for="(item,index) in list" @click="toDetail(item.id,item.carId)">
					<img v-if="item.images.length !== 0" :src="baseURL + item.images[0]" alt="" />
					<img v-else class="no_img" src="@/assets/images/nocar.png" alt="" />
					<div class="car_info_middle">
						<div class="car_name">{{item.car.carNumber || '--'}}</div>
						<div class="car_color">{{item.costTypeName || '--'}}</div>
						<div class="car_brand dis_f">
							<div class="" :class="{col_3:item.payChannel == '1',col_2:item.payChannel == '2',col_1:item.payChannel == '3'}">{{filterStatus(item.payChannel)}}</div>
						
							<div class="" style="margin-left: .1rem;">{{item.mustAmount}} 元</div>
						</div>
					</div>

					<div class="car_type pos_abs" :class="levelArr[item.financeStatus-1].color">{{levelArr[item.financeStatus-1].text}}</div>
				</div>
				<div class="no_data wa" v-if="noData">
					<img src="@/assets/images/no_data.png" alt="">
					<div class="text wa tac">没有数据</div>
				</div>
				<div class="pullup_end" v-if="!unTotal && !noData">已经到头了</div>
			</scroll>
		</div>

		<!-- 支付弹窗 -->
		<div class="qrcode_cover" v-show="isPay" @click="hideQrcode">
			<div class="qrcode_inner">
			<div
				class="qrcode"
				ref="qrcode"
				:class="payMethod === 0 ? 'weixin' : 'bao'"
			></div>
			<div class="pay_btns">
				<div class="pay_btn" @click="getPayData(0)">
					<img src="@/assets/images/wxpay.png" alt="" />
				</div>
				<div class="pay_btn" @click="getPayData(1)">
					<img src="@/assets/images/baopay.png" alt="" />
				</div>
			</div>
			</div>
		</div>

	</div>
</template>
<script>
import { getCarOrder } from "@/api/carOrder";
import { listCar } from "@/api/car";
import baseURL from '@/utils/url';
import Scroll from 'vue-scroll-m';
import { listCarOrderFinance } from "@/api/financeDetail";
import { listShop } from "@/api/shop";
import { listCostType } from "@/api/costType";
import QRCode from "qrcodejs2";
import { listFinanceDetail, payFinanceDetail, delFinanceDetail } from "@/api/financeDetail";
export default {
	name: 'financeDeatil',
	props: ["title"],
	dicts: ['pay_into_amount', 'finance_status', 'pay_way', 'payer_receiver'],
	components: {
		Scroll
	},
	data(){
		return {
			orderId: this.$route.params.id || 0,
			carId: this.$route.params.carId || 0,
			images: [],
			isPay: false,
			// 支付二维码地址
			qrcodeUrl: "",
			// 支付id
			payIds: [],
			// 车辆表格数据
			carList: [],
			// 非单个禁用
			single: true,
			levelArr:[
				{'text': '已收','color': 'work_bg'},
				{'text': '未收','color': 'coo_bg'},
				{'text': '已付','color': 'fix_bg'},
				{'text': '未付','color': 'finance_bg'}
			],
			isAllChecked:false,
			checkGroup:[],
			
			// 非多个禁用
			multiple: true,
			// 支付方法
			payMethod: 0,
			// 可支付数量
			canCheckLength: 0,
			baseURL: baseURL,
			list: [],
			listTotal: 0,
			unTotal: true,
			noData: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				carId: this.$route.params.carId,
				costTypeId: null,
				costTypeCode: null,
				costTypeName: null,
				financeType: null,
				mustAmount: null,
				mustTime: null,
				actualAmount: null,
				actualTime: null,
				discount: null,
				debt: null,
				payType: null,
				payIntoAmount: null,
				payIntoTime: null,
				isReceive: null,
			},
			isMoreSearch: false,
			// 发车门店表格数据
			shopList: [],
			// 费用类型表格数据
			costTypeList: [],
			dateTime: null,
		}
	},
	created(){
		this.loading = this.$loading({
			lock: true,
			text: "加载中",
			background: "rgba(0, 0, 0, 0.7)",
		});
		this.getData();
		this.getCarList();
		this.getCarOrder();
	},
	methods: {
		async getCarOrder(){
			await getCarOrder(this.orderId).then( res => {
				if(res.code == 200){
					this.carId = res.data.carId;
					this.queryParams.carId = res.data.carId;
					this.queryParams.id = res.data.id;
					this.queryParams.carNumber = res.data.car.carNumber;
					this.queryParams.brand = res.data.car.brand;
					this.queryParams.shopId = res.data.shopId;
				}
			})
		},
		selectCar(id){
			this.carId = id;
			this.getCar();
		},
		filterStatus(val){
			if(val=="1"){
				return "线下"
			} else if (val == "2"){
				return "微信"
			}else{
				return "支付宝"
			}
		},
		/** 2 查询车辆列表 */
		getCarList() {
			listCar().then( res => {
				this.carList = res.rows;
			});
		},
		getData(){
			this.getList();
			this.getShopList();
			this.getCostTypeList();
		},
    	getList() {
			listFinanceDetail(this.queryParams).then( res => {
				let list = res.rows;
				let images = [];
				this.listTotal = res.total;
				if(res.total !== 0){
					this.noData = false;
					list.forEach((item,index) => {
						if(item.car.carImg){
							images = item.car.carImg.split(",");
						}
						item.images = images || null;
						if(item.financeStatus != 2 && item.payChannel != '1'){
							// item.canPay = true;
							item.isChecked = false;
						}else{
							// item.canPay = false;
						}
						if(index === list.length - 1){
							if(this.queryParams.pageNum !== 1){
								this.list = this.list.concat(list);
								if(this.list.length === this.listTotal){
									this.unTotal = false;
								}
							}else{
								this.list = list;
							}
							// 阻断下拉加载
							if(this.list.length < 10){
								this.unTotal = false;
							}
						}
					})
				}else{
					this.list = [];
					this.unTotal = false;
					this.noData = true;
				}
			});
		},
		/** 查询发车门店列表 */
		getShopList() {
			listShop().then( res => {
				this.shopList = res.rows;
			});
		},
		// 查询费用类型列表
		getCostTypeList() {
			listCostType().then(res => {
				let list = [];
				res.rows.forEach((item, index) => {
					list.push({
						"costCode": item.costCode,
						"costType": item.costType,
						"id": item.id,
						"mustAmount": "",
						"isShow": false
					})
					if (res.rows.length - 1 === index) {
						this.costTypeList = list;
					}
				})
			});
			this.loading.close();
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.showSearch();
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,
				carId:this.queryParams.carId,
				id:this.queryParams.id,
				shopId:this.queryParams.shopId,
				carNumber:this.queryParams.carNumber,
				brand:this.queryParams.brand
			},
			this.unTotal = true;
			this.getList();
		},
		// 显示隐藏的搜索条件
		showSearch(){
			this.isMoreSearch = !this.isMoreSearch;
		},
		/** 选择日期操作 */
		changeTime(val) {
			if (val != null) {
				this.queryParams.beginTime = val[0];
				this.queryParams.finishTime = val[1]
			} else {
				this.queryParams.beginTime = null;
				this.queryParams.finishTime = null
			}
		},
		// 下拉加载
		onScroll(e) {
			// console.log(e.target.scrollTop)
		},
		// 顶部下拉到头（刷新）
		onPullingDown() {
			this.queryParams.pageNum = 1;
			this.unTotal = true;
			this.getList();
		},
		// 下拉松手 (加载)
		onScrollBottom(e) {
			if(this.list.length < this.listTotal ){
				this.queryParams.pageNum++;
				this.getList();
			}
		},
		goTop() {
			this.$refs.scroll.scrollTo(0, 0);
		},
		/** 线上收款 */
		handlePay() {
			this.getPayData(0);
		},
		async getPayData(type) {
			// type 用来区分 微信支付0 、 支付宝支付1
			this.payMethod = type;
			let id = this.payIds;
			await payFinanceDetail(id).then((res) => {
				this.isPay = true;
				let arr = res.data.data.message;
				var a = arr.indexOf("'https");
				var b = arr.indexOf("';", a);
				this.qrcodeUrl = arr.substring(a + 1, b - 1);
				this.creatQrCode();
			}).catch(() => {

			});
		},
		creatQrCode() {
			// qrcode.clear(); // 清除二维码方法二
			this.$refs.qrcode.innerHTML = ""; //清除二维码方法一
			let text = this.qrcodeUrl;
			var qrcode = new QRCode(this.$refs.qrcode, {
				text: text, // 需要转换为二维码的内容
				width: 200,
				height: 200,
				colorDark: "#000000",
				colorLight: "#ffffff",
				correctLevel: QRCode.CorrectLevel.H,
			});
		},
		hideQrcode() {
			this.isPay = false;
		},

		// x修改
		handleAllChecked(){
			if(this.isAllChecked){
				this.checkGroup = this.list;
			}else{
				this.checkGroup = [];
			}
		},		
		toDetail(id,carId){
			this.$router.push("../../financeDetail/" + id + '/' + carId);
		},

		cancalReadOnly(onOff) {
			this.$nextTick(() => {
				if (!onOff) {
					const Selects = this.$refs
				　　　　　　// 如果只有1个下拉框，这段就足够了---start
					if (Selects.agentSelect) {
						const input = Selects.agentSelect.$el.querySelector('.el-input__inner');
						console.log(input)
						input.removeAttribute('readonly')
					}
				}
			})
		}
	},
	watch: {
		queryParams(n,o){ //n为新值,o为旧值;
			// console.log(n,o)
			this.getList();
		}
	}
}
</script>
<style scoped="" lang="scss">
	@import '@/assets/css/currency.css';
	#financeDeatil{
		/*height: calc(100% - 6rem);*/

		/*底部加载中不显示*/
		.scroll_main {
			/*height: calc(100% - 6rem);*/
		}
		/deep/ .scroll-content{
			padding-bottom: 4rem;
		}
		.hidePullup /deep/ .pullup {
			display: none;
		}

		.navs_header_box{
			margin-top: 0;

			.cell{
				margin-top: 0;
			}
		}
	}
</style>